a, a:hover {
  text-decoration: none; }

ul, li {
  list-style: none; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

@keyframes turnForever {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }

@keyframes turnLeft {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

#app {
  width: 100%;
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: auto; }
  #app .bg {
    width: 100%;
    height: 100%;
    background: url("../images/c4.jpeg") no-repeat center;
    background-color: #7f7f7f;
    background-size: auto 100%;
    filter: blur(10px); }
  #app .app-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column; }

.header {
  width: 100%;
  height: 1.28rem;
  text-align: center;
  border-bottom: 1px solid #fdfdfd;
  background-color: rgba(93, 85, 83, 0.1); }
  .header p {
    color: #fff; }
  .header .title {
    font-size: 16px;
    margin-top: 0.10667rem; }
    [data-dpr='2'] .header .title {
      font-size: 32px; }
    [data-dpr='2.5'] .header .title {
      font-size: 40px; }
    [data-dpr='2.75'] .header .title {
      font-size: 44px; }
    [data-dpr='3'] .header .title {
      font-size: 48px; }
    [data-dpr='4'] .header .title {
      font-size: 64px; }

.content {
  width: 100%;
  position: relative;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden; }
  .content .pin {
    height: 3.81333rem;
    width: 2.29333rem;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-0.10667rem) rotate(-29deg);
    transform: translateX(-0.10667rem) rotate(-29deg);
    transform-origin: 0% 0%;
    background: url("../images/pin.png") no-repeat left top;
    background-size: auto 100%;
    z-index: 2;
    transition: transform 0.2s; }
    .content .pin.pin-play {
      -webkittransform: translateX(-0.10667rem) rotate(0deg);
      transform: translateX(-0.10667rem) rotate(0deg); }
  .content .pin-top {
    width: 0.69333rem;
    height: 0.37333rem;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url("../images/pin-circle.png") no-repeat center;
    background-size: 100% 100%;
    z-index: 3; }
  .content .pin-bottom {
    width: 0.98667rem;
    height: 0.53333rem;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url("../images/pin-under-circle.png") no-repeat center;
    background-size: 100% 100%;
    z-index: 3; }
  .content .disc {
    width: 8rem;
    height: 8rem;
    position: absolute;
    top: 2.13333rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url("../images/disc.png") no-repeat center;
    background-size: 100% 100%; }
    .content .disc .disc-center {
      width: 4.13333rem;
      height: 4.13333rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -2.06667rem;
      margin-top: -2.06667rem;
      border-radius: 50%; }
      .content .disc .disc-center.turn-forever {
        animation: turnForever 8s infinite linear; }
  .content .front, .content .back {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s; }
    .content .front.show, .content .back.show {
      opacity: 1; }
  .content .back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 0.53333rem; }
    .content .back .back-wrapper {
      width: 100%;
      height: 100%;
      position: relative; }
    .content .back canvas {
      width: 100%;
      height: 100%;
      border-bottom: 1px dashed #c8c8c8; }
    .content .back .vol {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1.06667rem; }
      .content .back .vol .inner {
        height: 0.02667rem;
        background-color: #b2b2b2;
        width: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateY(-50%);
        z-index: 1; }
      .content .back .vol .outer {
        height: 0.02667rem;
        background-color: #999;
        width: 0%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateY(-50%);
        z-index: 2; }
      .content .back .vol .dot {
        width: 0.42667rem;
        height: 0.42667rem;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 50%;
        z-index: 3; }

.footer {
  height: 4.26667rem;
  display: -webkit-flex;
  display: flex;
  flex-direction: column; }
  .footer .operator {
    height: 1.17333rem;
    line-height: 1.17333rem;
    text-align: center; }
    .footer .operator a {
      display: inline-block;
      margin: 0.25333rem 0.72rem 0rem;
      width: 0.74667rem;
      height: 0.66667rem;
      outline: none;
      text-decoration: none; }
      .footer .operator a i {
        display: block;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat; }
        .footer .operator a i.love {
          background-image: url("../images/icon-love.png");
          background-size: cover; }
        .footer .operator a i.download {
          background-image: url("../images/icon-download.png");
          background-size: cover; }
        .footer .operator a i.comment {
          background-image: url("../images/icon-comment.png");
          background-size: cover; }
        .footer .operator a i.more {
          background-image: url("../images/icon-list.png");
          background-size: auto 100%; }
  .footer .progress {
    height: 1.06667rem; }
    .footer .progress .progress-wrapper {
      display: -webkit-flex;
      display: flex; }
    .footer .progress .start {
      width: 12%;
      text-align: right;
      line-height: 1.06667rem;
      color: #fff; }
    .footer .progress .bar {
      -webkit-flex: 1;
      flex: 1;
      box-sizing: border-box;
      margin: 0rem 0.4rem;
      position: relative; }
      .footer .progress .bar div {
        display: inline-block; }
      .footer .progress .bar .inner {
        height: 0.05333rem;
        background-color: #b2b2b2;
        width: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateY(-50%);
        z-index: 1; }
      .footer .progress .bar .outer {
        height: 0.05333rem;
        background-color: #d33a31;
        width: 0%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateY(-50%);
        z-index: 2; }
      .footer .progress .bar .dot {
        width: 0.42667rem;
        height: 0.42667rem;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: url("../images/bar-dot.png") no-repeat center;
        background-size: 100%;
        z-index: 3; }
    .footer .progress .total {
      width: 12%;
      line-height: 1.06667rem;
      color: #fff; }
  .footer .change {
    -webkit-flex: 1;
    flex: 1;
    width: 100%;
    height: 2.02667rem;
    text-align: center;
    overflow: hidden; }
    .footer .change a {
      display: block;
      float: left;
      width: 20%;
      height: 100%;
      outline: none;
      text-decoration: none; }
      .footer .change a i {
        display: block;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 0.53333rem 0.52rem; }
        .footer .change a i.loop.single {
          background-image: url("../images/single.png"); }
        .footer .change a i.loop.turn {
          background-image: url("../images/turn.png"); }
        .footer .change a i.loop.random {
          background-image: url("../images/random.png"); }
        .footer .change a i.prev {
          background-image: url("../images/icon-prev.png"); }
        .footer .change a i.next {
          background-image: url("../images/icon-next.png"); }
        .footer .change a i.list {
          background-image: url("../images/icon-play-list.png"); }
      .footer .change a.pause > i {
        background-image: url("../images/icon-pause.png");
        background-size: 1.22667rem 1.22667rem; }
      .footer .change a.play > i {
        background-image: url("../images/icon-play.png");
        background-size: 1.22667rem 1.22667rem; }
      .footer .change a.loading > i {
        position: relative; }
        .footer .change a.loading > i::after {
          content: '';
          width: 1.22667rem;
          height: 1.22667rem;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -0.61333rem;
          margin-top: -0.61333rem;
          border: 2px solid #c8c8c8;
          border-radius: 50%;
          background: url("../images/loading.png") center no-repeat;
          animation: turnLeft 1.5s infinite; }

.play-list {
  width: 100%;
  height: 70%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  transition: transform 0.2s; }
  .play-list.up {
    -webkit-transform: tranlate(0, 0) tranlateZ(0);
    transform: tranlate(0, 0) tranlateZ(0); }
  .play-list.down {
    -webkit-transform: translate(0, 100%) translateZ(0);
    transform: translate(0, 100%) translateZ(0); }
  .play-list .play-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: transparent; }
  .play-list .play-content {
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10; }
    .play-list .play-content ul {
      -webkit-flex: 1;
      flex: 1;
      overflow: auto; }
      .play-list .play-content ul li {
        padding: 0.4rem 0.26667rem;
        border-bottom: 1px solid #c8c8c8;
        font-size: 16px; }
        [data-dpr='2'] .play-list .play-content ul li {
          font-size: 32px; }
        [data-dpr='2.5'] .play-list .play-content ul li {
          font-size: 40px; }
        [data-dpr='2.75'] .play-list .play-content ul li {
          font-size: 44px; }
        [data-dpr='3'] .play-list .play-content ul li {
          font-size: 48px; }
        [data-dpr='4'] .play-list .play-content ul li {
          font-size: 64px; }
        .play-list .play-content ul li .s-name {
          font-size: 12px;
          color: #ad9872; }
          [data-dpr='2'] .play-list .play-content ul li .s-name {
            font-size: 24px; }
          [data-dpr='2.5'] .play-list .play-content ul li .s-name {
            font-size: 30px; }
          [data-dpr='2.75'] .play-list .play-content ul li .s-name {
            font-size: 33px; }
          [data-dpr='3'] .play-list .play-content ul li .s-name {
            font-size: 36px; }
          [data-dpr='4'] .play-list .play-content ul li .s-name {
            font-size: 48px; }
    .play-list .play-content .title {
      padding: 0.4rem 0.26667rem;
      border-bottom: 1px solid #c8c8c8;
      font-size: 16px; }
      [data-dpr='2'] .play-list .play-content .title {
        font-size: 32px; }
      [data-dpr='2.5'] .play-list .play-content .title {
        font-size: 40px; }
      [data-dpr='2.75'] .play-list .play-content .title {
        font-size: 44px; }
      [data-dpr='3'] .play-list .play-content .title {
        font-size: 48px; }
      [data-dpr='4'] .play-list .play-content .title {
        font-size: 64px; }
      .play-list .play-content .title .loop {
        display: inline-block;
        width: 0.58667rem;
        height: 0.53333rem;
        margin-right: 0.10667rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 40px 39px;
        vertical-align: -0.10667rem; }
        .play-list .play-content .title .loop.single {
          background-image: url("../images/single-dark.png"); }
        .play-list .play-content .title .loop.turn {
          background-image: url("../images/turn-dark.png"); }
        .play-list .play-content .title .loop.random {
          background-image: url("../images/random-dark.png"); }
    .play-list .play-content .footer {
      text-align: center;
      font-size: 16px;
      height: 1.42667rem;
      line-height: 1.42667rem;
      border-top: 1px solid #c8c8c8; }
      [data-dpr='2'] .play-list .play-content .footer {
        font-size: 32px; }
      [data-dpr='2.5'] .play-list .play-content .footer {
        font-size: 40px; }
      [data-dpr='2.75'] .play-list .play-content .footer {
        font-size: 44px; }
      [data-dpr='3'] .play-list .play-content .footer {
        font-size: 48px; }
      [data-dpr='4'] .play-list .play-content .footer {
        font-size: 64px; }
